<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="shortcut icon" href="./images/dufu.ico" type="image/x-icon">
    <title>杜甫</title>
    <link rel="stylesheet" href="./index.css">
</head>
<body>
    <main>
        <div class="msgbox" id="msgbox">
            <!-- <div class="msg left">
                <img src="./images/libai.jpg" width="40" height="40" alt="">
                <section>oula</section>
            </div>
            <div class="msg right">
                <section>lalala</section>
                <img src="./images/dufu.jpg" width="40" height="40" alt="">
            </div> -->
            <div class="tips" id="tips">内容不能为空</div>
        </div>
        <textarea id="txt" placeholder="请输入内容"></textarea>
    </main>

    <script>
        const ws = new WebSocket('ws://localhost:8080/ws/dufu');
        const ws2 = new WebSocket('ws://localhost:8080/ws/dufu2');
        ws.onopen = () => {  };
        ws2.onopen = () => {  };
        ws.onmessage = msg => {
            console.log(msg.data);
            msgbox.innerHTML += rightMsgFn(msg.data);
            msgbox.scrollTo({
                top: msgbox.scrollHeight,
                behavior: "smooth"
            })
        }
        ws2.onmessage = msg => {
            console.log(msg.data);
            msgbox.innerHTML += leftMsgFn(msg.data);
            msgbox.scrollTo({
                top: msgbox.scrollHeight,
                behavior: "smooth"
            })
        }
        ws.onclose = () => {
            console.log('连接关闭')
        }
        ws2.onclose = () => {
            console.log('连接关闭')
        }
        ws.onerror = () => {
            console.log('连接错误')
        }
        ws2.onerror = () => {
            console.log('连接错误')
        }

        function leftMsgFn(value) {
            return `
                <div class="msg left">
                 <img src="./images/libai.jpg" width="40" height="40" alt="">
                 <section>${value}</section>
                </div>
            `;
        }
        function rightMsgFn(value) {
            return `
                <div class="msg right">
                    <section>${value}</section>
                    <img src="./images/dufu.jpg" width="40" height="40" alt="">
                </div>
            `
        }
        txt.onkeyup = function (e) {
            if (e.keyCode === 13) {
                if (txt.value.trim() !== '') {
                    let value = txt.value;
                    // let msgbox = document.querySelector('#msgbox');
                    // msgbox.innerHTML += rightMsgFn(value);
                    ws.send(value)
                } else {
                    let tips = document.querySelector('#tips')
                    tips.style.display = 'block';
                    setTimeout(() =>{
                        tips.style.display = 'none'
                    },1000)
                }
                txt.value = '';
            }
        }
    </script>
</body>
</html>